<template>
  <a-row align="middle" :wrap="false" style="min-width: 1000px">
    <a-col flex="auto"
      ><a-flex class="user-btn" justify="space-between">
        <a-flex justify="flex-start" gap="30">
          <div class="logo" style="color: #ffffff">LOGO</div>
          <a-menu
            v-model:selectedKeys="selectedKeys"
            theme="dark"
            mode="horizontal"
            :style="{ lineHeight: '64px' }"
            @click="menuLink"
            inlineCollapsed="false"
            v-for="(item, index) in visibleRoutes"
            :key="item.path"
          >
            <a-menu-item :key="item.path">
              {{ item.name }}
            </a-menu-item>
          </a-menu>
        </a-flex>
      </a-flex></a-col
    >
    <a-col flex="200px">
      <a-flex gap="middle" v-if="!user.loginState">
        <a-button type="primary" @click="userLogin">Sign in</a-button>
        <a-button ghost @click="userRegister">Sign up</a-button></a-flex
      >
      <a-flex gap="middle" v-if="user.loginState">
        <div class="ant-dropdown-link">
          <a-dropdown :arrow="{ pointAtCenter: true }">
            <a-avatar
              size="large"
              :style="{ backgroundColor: color, verticalAlign: 'middle' }"
              :gap="gap"
              @click.prevent
            >
              {{ avatarValue }}
            </a-avatar>
            <DownOutlined />
            <template #overlay>
              <a-menu>
                <a-menu-item v-for="item of userRoutes" :key="item.path">
                  <a href="javascript:;" @click="toUserInfo(item)">{{
                    item.name
                  }}</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
        <div style="color: #ffffff">{{ user?.userName }}</div>
      </a-flex>
    </a-col>
  </a-row>
  <login ref="RefLogin" />
  <register ref="RefRegister" />
</template>

<script lang="ts" setup>
import { reactive, computed, onMounted } from "vue";

import login from "../user/login.vue";
import register from "../user/register.vue";
import { defineComponent, ref } from "vue";
import { routes } from "@/router/routes";
import { useRouter } from "vue-router";
import { userStore } from "@/stores/user";
import { storeToRefs } from "pinia";
import checkAccess from "@/access/checkAccess";
import { UserControllerService } from "../../../generated";
import { DownOutlined } from "@ant-design/icons-vue"; //头像悬浮菜单;
import Cookies from "js-cookie";
import { useCookies } from "vue3-cookies";
import axios from "axios";
const { cookies } = useCookies();
//头像设置
const UserList = ["U", "Lucy", "Tom", "Edward"];
const colorList = ["#f56a00", "#7265e6", "#ffbf00", "#00a2ae"];
const avatarValue = ref(UserList[0]);
const color = ref(colorList[0]);
const GapList = [4, 3, 2, 1];
const gap = ref(GapList[0]);

const router = useRouter();
const selectedKeys = ref(); //默认菜单key（主页）
const frontRoutes = routes[0].children;
// 显示页面的登录
const RefLogin = ref();
const userLogin = () => {
  RefLogin.value.showModal();
  console.log("用户登录");
};
// 显示页面的展示
const RefRegister = ref();
const userRegister = () => {
  RefRegister.value.showModal();
};
//菜单单元点击触发事件，实现页面的路由跳转
const menuLink = ({ key }) => {
  router.push(key);
};
// 路由跳转，在跳转后更新对应的默认值，避免跳转后菜单单元不高亮
router.afterEach((to, from, funture) => {
  console.log(to.path);
  const path = to.path.split("/")[1];
  selectedKeys.value = [path];
  sessionStorage.setItem("menuPath", path);
  // a();
});
const a = () => {
  selectedKeys.value = [sessionStorage.getItem("menuPath")];
};
const user = userStore();
const { userRole } = storeToRefs(userStore());
const visibleRoutes = computed(() => {
  return frontRoutes.filter((item, index) => {
    if (item.meta?.hideInMenu) {
      return false;
    }
    if (!item.meta?.info == false) {
      return false;
    }
    // 根据权限进行判断
    if (!checkAccess(userRole.value, item?.meta?.access as string)) {
      return false;
    }
    return true;
  });
});
const userRoutes = computed(() => {
  return frontRoutes.filter((item, index) => {
    if (item.meta?.hideInMenu) {
      return false;
    }
    if (item.meta?.info == false) {
      return false;
    }
    // 根据权限进行判断
    if (!checkAccess(userRole.value, item?.meta?.access as string)) {
      return false;
    }
    return true;
  });
});
console.log(userRoutes.value);

// 实现用户页面跳转
const toUserInfo = (item) => {
  router.push(item?.path);
};
// 查询用户登录状态;
const searchUserLoginState = async () => {
  console.log(cookies.get("SESSION"));
  const res = await axios.get("http://62.234.211.209:8121/user/get/login", {
    withCredentials: true,
  });
  console.log(res.data);
};

// setTimeout(() => {
//   const { setLoginUser } = user;
//   setLoginUser("user");
//   console.log(visibleRoutes);
// }, 2000);
onMounted(() => {
  a();
});
</script>

<style scoped></style>
